<template>
  <div>
    <el-form class="search-form">
      <el-form-item label="IDS组合">
        <el-input
          v-model="searchForm.pids"
          clearable
          style="width:150px"
        />
      </el-form-item>
      <el-form-item label="IDS组合名称">
        <el-input
          v-model="searchForm.pidsName"
          clearable
          style="width:150px"
        />
      </el-form-item>
      <el-form-item label="行政区划代码">
        <el-input
          v-model="searchForm.code"
          clearable
          style="width:150px"
        />
      </el-form-item>
      <el-form-item label="行政区域名称">
        <el-input
          v-model="searchForm.name"
          clearable
          style="width:150px"
        />
      </el-form-item>
      <el-form-item label="层级">
        <el-input
          v-model="searchForm.level"
          clearable
          style="width:150px"
        />
      </el-form-item>
    </el-form>
    <div class="operations">
      <el-button
        type="success"
        @click="load"
      >查询</el-button>
      <el-button
        type="primary"
        @click="openForm()"
      >新增</el-button>
      <el-button
        type="danger"
        :disabled="seleteList.length == 0"
        @click="deleteHandle()"
      >批量删除</el-button>
    </div>
    <el-table
      :data="dataList"
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        prop="pid"
        label="父id"
      />
      <el-table-column
        prop="pids"
        :show-overflow-tooltip="true"
        label="IDS组合"
      />
      <el-table-column
        prop="pidsName"
        :show-overflow-tooltip="true"
        label="IDS组合名称"
      />
      <el-table-column
        prop="name"
        label="行政区域名称"
      />
      <el-table-column
        prop="englishName"
        label="英文名称"
      />
      <el-table-column
        prop="code"
        label="行政区划代码"
      />
      <el-table-column
        prop="level"
        label="树状结构层次数"
      />
      <el-table-column
        prop="levelName"
        label="英文名称"
      />
      <el-table-column
        prop="countryId"
        label="国家ID"
      />
      <el-table-column label="操作" width="200px">
        <template #default="scope">
          <el-button
            type="primary"
            @click="openForm(scope.row.id)"
          >编辑</el-button>
          <el-button
            type="danger"
            @click="deleteHandle(scope.row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      layout="prev, pager, next, jumper,total"
      :total="total"
      :current-page="pageNum"
      style="margin-top:15px"
      @size-change="pageSizeChange"
      @current-change="pageChange"
    />
    <Form
      ref="form"
      @refresh="load"
    />
  </div>
</template>

<script>
import { getRegionPage, deleteRegionBatch, deleteRegionById } from '@/api/system/region'
import Form from './components/form.vue'
export default {
  components: { Form },
  data() {
    return {
      dataList: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      searchForm: {
        key: '',
        categoryId: ''
      },
      seleteList: []
    }
  },
  mounted() {
    this.load()
  },
  methods: {
    async load() {
      const data = await getRegionPage({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        pids: this.searchForm.pids,
        pidsName: this.searchForm.pidsName,
        code: this.searchForm.code,
        name: this.searchForm.name,
        level: this.searchForm.level
      })
      this.dataList = data.data.records
      this.total = data.data.total
    },
    pageChange(page) {
      this.pageNum = page
      this.load()
    },
    pageSizeChange(size) {
      this.pageSize = size
      this.load()
    },
    handleSelectionChange(rows) {
      this.seleteList = rows
    },
    openForm(id) {
      this.$refs.form.init(id)
    },
    deleteHandle(id) {
      this.$confirm(
        '确定要删除吗？',
        'Warning',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        if (id) {
          console.log(id)
          this.delete(deleteRegionBatch, id)
        } else {
          let ids = ''
          this.seleteList.forEach(item => {
            ids += item.id + ','
          })
          this.delete(deleteRegionById, ids)
        }
      })
        .catch(() => { })
    },
    delete(operation, param) {
      operation(param).then(() => {
        this.load()
        this.$message({
          type: 'success',
          message: '操作成功'
        })
      }).catch(() => {
        this.$message({
          type: 'danger',
          message: '操作失败'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.search-form {
  margin: 10px 0;
  padding: 0 10px;
  display: flex;
  .el-form-item {
    margin-right: 20px;
  }
}
.operations {
  padding: 0 10px;
}
</style>
